<template>
	<view class="content">
		<!-- 留出顶部状态栏的高度 -->
		<view class="f0" :style="{width:'100%', height: statusBarHeight + 'px',backgroundColor: '#009900'}"></view>
		<!-- 自定义导航条 -->
		<zh-nav-bar title="待缴费用">
			<text slot="icon-left">
				<uni-icons size="26" color="#fff" type="back" @click="back"></uni-icons>
			</text>

			<text slot="icon-right">
				<uni-icons size="26" color="#fff" class="icon" type="list" @click="goToFeeHistory"></uni-icons>
			</text>
		</zh-nav-bar>

		<!-- 费用汇总 -->
		<view class="f2">
			<text>目前待缴费用总额</text>
			<text class="total">￥{{total}}</text>
		</view>
		<!-- 各项费用列表 -->
		<uni-list>
			<uni-list-item title="水费" thumb='/static/img/shui.png' thumbSize='lg' to="/pages/fee-pay/fee-pay?type=1"
				link="navigateTo" :rightText="this.fees.shui < 0 ? ('待缴￥'+ this.fees.shui*-1) : ''">
			</uni-list-item>
			<uni-list-item title="电费" thumb='/static/img/dian.png' thumbSize='lg' to="/pages/fee-pay/fee-pay?type=2"
				link="navigateTo" :rightText="this.fees.dian < 0 ? ('待缴￥'+ this.fees.dian*-1) : ''">
			</uni-list-item>
			<uni-list-item title="燃气费" thumb='/static/img/ranqi.png' thumbSize='lg' to="/pages/fee-pay/fee-pay?type=3"
				link="navigateTo" :rightText="this.fees.ranqi < 0 ? ('待缴￥'+ this.fees.ranqi*-1) : ''">
			</uni-list-item>
			<uni-list-item title="物业费" thumb='/static/img/wuye.png' thumbSize='lg' to="/pages/fee-pay/fee-pay?type=4"
				link="navigateTo" :rightText="this.fees.wuye < 0 ? ('待缴￥'+ this.fees.wuye*-1) : ''">
			</uni-list-item>
			<uni-list-item title="停车费" thumb='/static/img/tingche.png' thumbSize='lg' to="/pages/fee-pay/fee-pay?type=5"
				link="navigateTo" :rightText="this.fees.tingche < 0 ? ('待缴￥'+ this.fees.tingche*-1) : ''">
			</uni-list-item>
			<uni-list-item title="宽带费" thumb='/static/img/kuandai.png' thumbSize='lg' to="/pages/fee-pay/fee-pay?type=6"
				link="navigateTo" :rightText="this.fees.kuandai < 0 ? ('待缴￥'+ this.fees.kuandai*-1) : ''">
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import {
		feeList
	} from '../../service'
	export default {
		data() {
			return {
				fees: {}, // 费用汇总对象
				statusBarHeight: 0 // 系统顶部状态栏高度
			}
		},
		async onLoad() {
			let data = await feeList()
			// console.log(data);
			this.fees = data
			// 获取当前设备高度
			let info = uni.getSystemInfoSync()
			this.statusBarHeight = info.statusBarHeight
		},
		computed: {
			total() {
				// 待缴费用的总金额
				let sum = 0;
				/* 
				短路&：如果表达式1为true，则表达式2执行，否则不执行
				true && true
				true && false
				false && false
				false && false
				 */
				// 注意：使用（）调整优先级，前一行的结尾都需要添加分号
				(this.fees.shui < 0) && (sum += this.fees.shui);
				(this.fees.dian < 0) && (sum += this.fees.dian);
				(this.fees.ranqi < 0) && (sum += this.fees.ranqi);
				(this.fees.wuye < 0) && (sum += this.fees.wuye);
				(this.fees.tingche < 0) && (sum += this.fees.tingche);
				(this.fees.kuandai < 0) && (sum += this.fees.kuandai);
				return Math.abs(sum).toFixed(2);
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			goToFeeHistory() {
				uni.navigateTo({
					url: '/pages/fee-history/fee-history'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.f2 {
		padding: $uni-spacing-col-lg*4 0;
		border-top: 1px solid $uni-border-color;
		flex-direction: column;
		align-items: center;
		background-color: $zh-theme-dark;
		color: #fff;

		.total {
			font-size: $uni-font-size-lg*3;
			margin: $uni-spacing-col-lg;
		}
	}
</style>
